import { css, Global } from '@emotion/react';

/**
 * mapbox 默认不会跟随浏览器窗口 re-size, 要设置 .mapboxgl-canvas
 * https://github.com/PolymerVis/mapbox-gl/issues/22
 * */
const customStyles = css`
  .mapboxgl-canvas {
    outline: none;
    width: 100vw !important;
    height: 100vh !important;
  }

  a.mapboxgl-ctrl-logo {
    display: none;
  }
`;

export const MapboxStyles = () => <Global styles={customStyles} />;
